<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/personalData.css">
    <title>个人资料</title>
</head>
<body>
<div class="body">
    <div class="title">
        <p>个人资料</p>
    </div>
    <div class="person-data">
        <!--昵称-->
        <div class="nickname">
            <!--左侧-->
            <div class="nickname-left">
                <div class="nickname-left-img">
                    <img src="../images/inckname.png">
                    <span>昵称</span>
                </div>
                <div class="nicekname-left-text">
                    <p>marryna</p>
                </div>
            </div>
            <!--右侧头像-->
            <div class="nickname-img">
                <div>
                    <label for="img"><p  id="personImg"></p></label>
                    <input type="file" id="img" onchange="upload(this)">
                </div>
            </div>
        </div>
        <!--邮箱-->
        <div class="mailbox outer-box">
            <div class="mailbox-text">
                <div class="mailbox-img upper">
                    <img src="../images/email.png">
                    <span>邮箱</span>
                </div>
                <div class="mailbox-account lower">
                    <p>5682950287@qq.com</p>
                </div>
            </div>
        </div>
        <!--密码-->
        <div class="password outer-box">
            <div class="password-text">
                <div class="upper">
                    <img src="../images/password.png">
                    <span>密码</span>
                </div>
                <div class="lower">
                    <p>**********</p>
                    <button>修改</button>
                </div>
            </div>
        </div>
        <!--我的邀请码-->
        <div class="invitation outer-box">
            <div class="password-text">
                <div class="upper">
                    <img src="../images/invitation.png">
                    <span>我的邀请码</span>
                </div>
                <div class="lower">
                    <p>123456789</p>
                    <button>重置</button>
                </div>
            </div>
        </div>
        <!--穿云令-->
        <div class="gift outer-box">
            <div class="gift-text">
                <div class="upper">
                    <img src="../images/gift.png">
                    <span>穿云令</span>
                </div>
                <div class="lower">
                    <p>123456dfgs123456</p>
                    <button onclick="dedeem()">兑换</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var personImg = document.getElementById('personImg');
    var img = document.getElementById('img');
    var imgURL = "";
    function upload(node) {
        console.log(personImg.value);
        console.log(node.files[0]);
        try{
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0];
            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0);
            }
//            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
            try{
                imgURL =  file.getAsDataURL();
            }catch(e){
                imgURL = window.URL.createObjectURL(file);
            }
        }catch(e){
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }
        creatImg(imgURL);
        return imgURL;
    }
    function creatImg(imgURL){
        personImg.style.background= "url("+imgURL+") 100% 100% no-repeat";
        personImg.style.backgroundSize ='cover';
    }
    function dedeem() {
        window.location.href = '../html/RedeemCode.html';
    }
</script>
</body>
</html>